import React from 'react';
import LoginPage from "./index";
import {Input, Form, Button} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';

function LoginPagePassword(props) {
  const {
    size = 'large',
    api,
    usernameKey = 'username',
    passwordKey = 'password',
    redirect = '/',
    ...layoutProps
  } = props;

  const [form] = Form.useForm();

  const onFinish = (result) => {
    $request(api, {
      [usernameKey]: result.username,
      [passwordKey]: result.password,
    }).then(() => {
      location.replace(redirect);
    })
  }

  return (
    <LoginPage {...layoutProps}>
      <Form onFinish={onFinish} form={form}>
        <Form.Item name="username" rules={[{required: true, message: '请输入账号'}]}>
          <Input prefix={<UserOutlined/>} size={size} placeholder="请输入账号"/>
        </Form.Item>
        <Form.Item name="password" rules={[{required: true, message: '请输入密码'}]}>
          <Input.Password prefix={<LockOutlined/>} size={size} placeholder="请输入密码"/>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" size={size} block>登录</Button>
        </Form.Item>
      </Form>
    </LoginPage>
  );
}

export default LoginPagePassword;
